<template>
  <div class="plan-detail">
    <el-page-header @back="goBack" title="返回">
      <template #content>
        <h1 class="page-title">计划详情</h1>
      </template>
    </el-page-header>

    <div v-loading="loading" class="detail-content">
      <!-- 计划基本信息 -->
      <el-card class="content-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <div class="header-left">
              <el-icon class="title-icon"><Document /></el-icon>
              <span>计划信息</span>
            </div>
          </div>
        </template>

        <div class="plan-info-grid">
          <div class="info-item">
            <el-icon class="info-icon"><Reading /></el-icon>
            <div class="info-content">
              <div class="info-label">计划名称</div>
              <div class="info-value">{{ planDetail.planName || '-' }}</div>
            </div>
          </div>

          <div class="info-item">
            <el-icon class="info-icon"><Calendar /></el-icon>
            <div class="info-content">
              <div class="info-label">计划类型</div>
              <div class="info-value">{{ getPlanTypeText(planDetail.planType) }}</div>
            </div>
          </div>

          <div class="info-item">
            <el-icon class="info-icon"><Clock /></el-icon>
            <div class="info-content">
              <div class="info-label">开始日期</div>
              <div class="info-value">{{ planDetail.startDate || '-' }}</div>
            </div>
          </div>

          <div class="info-item">
            <el-icon class="info-icon"><Clock /></el-icon>
            <div class="info-content">
              <div class="info-label">结束日期</div>
              <div class="info-value">{{ planDetail.endDate || '-' }}</div>
            </div>
          </div>

          <div class="info-item">
            <el-icon class="info-icon"><Timer /></el-icon>
            <div class="info-content">
              <div class="info-label">创建时间</div>
              <div class="info-value">{{ formatDateTime(planDetail.createTime) }}</div>
            </div>
          </div>

          <div v-if="planDetail.remark" class="info-item" style="grid-column: 1 / -1;">
            <el-icon class="info-icon"><Memo /></el-icon>
            <div class="info-content">
              <div class="info-label">备注</div>
              <div class="info-value">{{ planDetail.remark }}</div>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 任务列表 -->
      <el-card class="content-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <div class="header-left">
              <el-icon class="title-icon"><List /></el-icon>
              <span>任务列表 ({{ taskList.length }})</span>
            </div>
          </div>
        </template>

        <div class="task-list">
          <el-empty v-if="taskList.length === 0" description="暂无任务" />
          
          <div
            v-for="(item, index) in taskList"
            :key="item.id"
            class="task-item-card"
          >
            <div class="task-number">{{ index + 1 }}</div>
            
            <div class="task-main">
              <div class="task-header">
                <h3>{{ item.task?.title || '未知任务' }}</h3>
                <el-tag :type="item.status === 1 ? 'success' : 'info'" size="large">
                  {{ item.status === 1 ? '已完成' : '待完成' }}
                </el-tag>
              </div>

              <div class="task-meta">
                <div class="meta-item">
                  <el-icon><Collection /></el-icon>
                  <span>{{ getDomainText(item.task?.domain) }}</span>
                </div>
                <div class="meta-item">
                  <el-icon><TrendCharts /></el-icon>
                  <span>{{ getDifficultyText(item.task?.difficulty) }}</span>
                </div>
                <div class="meta-item">
                  <el-icon><Clock /></el-icon>
                  <span>{{ item.scheduledDate }} {{ item.scheduledTime }}</span>
                </div>
              </div>

              <div v-if="item.task?.description" class="task-description">
                <p>{{ item.task.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 完成情况统计 -->
      <el-card class="content-card stats-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <div class="header-left">
              <el-icon class="title-icon"><DataAnalysis /></el-icon>
              <span>完成情况统计</span>
            </div>
          </div>
        </template>

        <div class="stats-content">
          <div class="stat-item">
            <div class="stat-circle completed">
              <div class="stat-number">{{ completedCount }}</div>
              <div class="stat-label">已完成</div>
            </div>
          </div>
          <div class="stat-item">
            <div class="stat-circle pending">
              <div class="stat-number">{{ pendingCount }}</div>
              <div class="stat-label">待完成</div>
            </div>
          </div>
          <div class="stat-item">
            <div class="stat-circle total">
              <div class="stat-number">{{ completionRate }}%</div>
              <div class="stat-label">完成率</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getPlanDetail } from '@/api/plan'
import { DOMAIN_MAP, DIFFICULTY_MAP, PLAN_TYPE_MAP } from '@/utils/constants'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()

const loading = ref(false)
const planDetail = ref({})
const taskList = ref([])

// 计算完成情况
const completedCount = computed(() => {
  return taskList.value.filter(item => item.status === 1).length
})

const pendingCount = computed(() => {
  return taskList.value.filter(item => item.status !== 1).length
})

const completionRate = computed(() => {
  if (taskList.value.length === 0) return 0
  return Math.round((completedCount.value / taskList.value.length) * 100)
})

const getDomainText = (domain) => {
  return DOMAIN_MAP[domain] || domain
}

const getDifficultyText = (difficulty) => {
  return DIFFICULTY_MAP[difficulty] || difficulty
}

const getPlanTypeText = (type) => {
  return PLAN_TYPE_MAP[type] || type
}

const formatDateTime = (dateTime) => {
  if (!dateTime) return '-'
  return dayjs(dateTime).format('YYYY-MM-DD HH:mm')
}

const goBack = () => {
  router.back()
}

// 加载计划详情
const loadPlanDetail = async () => {
  const planId = route.params.id
  
  // 验证计划ID是否有效
  if (!planId || planId === ':id' || isNaN(Number(planId))) {
    ElMessage.error('无效的计划ID')
    goBack()
    return
  }

  loading.value = true
  try {
    const data = await getPlanDetail(planId)
    planDetail.value = data.plan || {}
    taskList.value = data.planItems || []
  } catch (error) {
    console.error('加载计划详情失败:', error)
    ElMessage.error('加载计划详情失败，请返回重试')
    // 出错后延迟返回
    setTimeout(() => {
      goBack()
    }, 2000)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadPlanDetail()
})
</script>

<style scoped>
.plan-detail {
  padding: 20px;
}

.page-title {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.detail-content {
  margin-top: 20px;
}

.content-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
}

.title-icon {
  font-size: 20px;
  color: #ffb3d9;
}

/* 计划信息网格 */
.plan-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background: linear-gradient(135deg, #fff5fb 0%, #fff9f5 100%);
  border-radius: 8px;
}

.info-icon {
  font-size: 24px;
  color: #ffb3d9;
}

.info-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.info-label {
  font-size: 13px;
  color: #909399;
}

.info-value {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
}

/* 任务列表 */
.task-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.task-item-card {
  display: flex;
  gap: 15px;
  padding: 20px;
  background: linear-gradient(135deg, #fff9fc 0%, #fff5f8 100%);
  border-radius: 12px;
  border-left: 4px solid #ffb3d9;
  transition: all 0.3s;
}

.task-item-card:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(255, 179, 217, 0.2);
}

.task-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #ffb3d9 0%, #ffc299 100%);
  color: white;
  font-size: 18px;
  font-weight: bold;
  border-radius: 50%;
  flex-shrink: 0;
}

.task-main {
  flex: 1;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.task-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.task-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #606266;
}

.meta-item .el-icon {
  color: #ffb3d9;
}

.task-description {
  margin-top: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}

/* 统计卡片 */
.stats-card {
  background: linear-gradient(135deg, #fff5fb 0%, #fffaf5 100%);
}

.stats-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 0;
}

.stat-item {
  text-align: center;
}

.stat-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.stat-circle:hover {
  transform: scale(1.1);
}

.stat-circle.completed {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
}

.stat-circle.pending {
  background: linear-gradient(135deg, #909399 0%, #b1b3b8 100%);
}

.stat-circle.total {
  background: linear-gradient(135deg, #ffb3d9 0%, #ffc299 100%);
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: white;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: white;
  opacity: 0.9;
}
</style>






